<template>
  <div class="box">
    <div class="box-aside">
      <div class="aside-top">
        <br />
        <h2>用户信息</h2>
        <div class="top">
          <div class="top-url">
            <img :src="avatarUrl" alt="用户头像" v-if="avatarUrl" />
            <p>头像</p>
          </div>
          <div class="top-box">
            <p>ID</p>
            <el-input
              placeholder="请输入内容"
              v-model="currentUser.id"
              :disabled="true"
            >
            </el-input>
          </div>
          <div class="top-box">
            <p>用户</p>
            <el-input
              placeholder="请输入内容"
              v-model="currentUser.username"
              :disabled="true"
            >
            </el-input>
          </div>
          <!-- <div class="top-box">
            <p>密码</p>
            <el-input
              placeholder="请输入内容"
              
              :disabled="true"
            >
            </el-input>
          </div> -->
          <div class="top-box">
            <p>是否为管理员</p>
            <el-input
              placeholder="请输入内容"
              :value="currentUser.isAdmin ? '是' : '否'"
              :disabled="true"
            >
            </el-input>
          </div>
        </div>
      </div>
    </div>
    <div class="box-aside">
      <div class="aside-botton">
        <div class="main">
          <el-table :data="tableData">
            <el-table-column prop="userId" label="用户id" width="200">
            </el-table-column>
            <el-table-column prop="actionTime" label="操作时间" width="200">
            </el-table-column>
            <el-table-column prop="actionContent" label="操作内容" width="200">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchUserInfo } from "@/Service/fetchUserInfo.js";
import { getUserId } from "@/Service/huo-qu.js";
import { fetchUserActions } from "@/Service/query-log.js";
import { getAvatarURLByUserId } from "@/Service/user-managament.js";

export default {
  created() {
    const userId = getUserId(); // 同步获取
    this.currentUserId = userId ? parseInt(userId) : 1;
  },
  data() {
    return {
      input: "",

      //青山添加
      currentUser: {
        username: "", //青山添加，调用我封装的根据ID查询用户信息，但是登录逻辑并没有完成，所以待验证。只要识别登录的用户名后把ID取出来，
        //然后查询就行。
        password: "", //青山添加
        isAdmin: false, //青山添加
        id: "", //青山添加
      },
      avatarUrl: "",
      tableData: [],
    };
  },

  async mounted() {
    const userInfo = await fetchUserInfo();

    if (userInfo) {
      // 直接赋值整个 userInfo 对象（包含 avatarUrl）
      this.currentUser = userInfo;
      console.log("用户信息:", this.currentUser);

      console.log("覆盖。");

      const userId = userInfo.id;
      console.log("用户ID:", userId);

      try {
        const actions = await fetchUserActions(userId);
        this.avatarUrl = await getAvatarURLByUserId(this.currentUserId);
        this.tableData = actions;
        // alert("查询成功");
      } catch (error) {
        console.error("查询失败:", error);
        // alert("查询失败");
      }
    } else {
      alert("无法加载用户信息");
    }
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  background: #f0f2f5;
  font-family: "Segoe UI", "Microsoft Yahei", sans-serif;
  color: #333;
}

/* 主容器 - 玻璃拟态风格 */
.box {
  width: 100%;
  max-width: 1400px;
  margin: 2rem auto;
  margin-left: 250px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 30px;
  /* 移除 margin-left: 300px; */
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.box-aside {
  width: 100%;
  padding: 25px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.top-box {
  padding: 1.2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.top-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(74, 105, 189, 0.1);
}
.aside-botton {
  height: calc(100vh - 200px);
  overflow-y: auto;
  padding: 0;
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.el-table {
  --el-table-border-color: transparent;
  --el-table-header-bg-color: rgba(74, 105, 189, 0.05);
}

.el-table th {
  font-weight: 600;
  color: #4a69bd;
}

.el-table tr:hover {
  background-color: rgba(74, 105, 189, 0.03) !important;
}
.top-url {
  margin-left: 50px;
}
.top-url img {
  width: 120px;
  height: 120px;
  margin: 20px auto;
  background: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.top-url i {
  color: #4a69bd;
  font-size: 36px;
}
@media (max-width: 992px) {
  .box {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .aside-botton {
    height: 400px;
    margin-top: 30px;
  }

  .top-url {
    width: 100px;
    height: 100px;
  }
}
.aside-botton::-webkit-scrollbar {
  width: -6px;
}

.aside-botton::-webkit-scrollbar-thumb {
  background: rgba(74, 105, 189, 0.2);
  border-radius: 4px;
}
.aside-top h2 {
  font-size: 1.5rem;
  text-align: center;
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

.aside-top h2::after {
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
}
</style>